React Native এর বেসিক Components

React Native অ্যাপ্লিকেশন তৈরি করতে বেশ কিছু বেসিক কম্পোনেন্ট ব্যবহৃত হয়। এই কম্পোনেন্টগুলি মোবাইল অ্যাপ্লিকেশনের UI তৈরি করার জন্য ব্যবহৃত হয় এবং React Native-এ নেটিভ প্ল্যাটফর্মের সাথে ইন্টারঅ্যাক্ট করে। নিচে React Native এর কিছু প্রধান বেসিক কম্পোনেন্টের বিস্তারিত আলোচনা করা হলো:

১. View

• ব্যবহার: View কম্পোনেন্টটি React Native-এ সবচেয়ে মৌলিক এবং গুরুত্বপূর্ণ কম্পোনেন্ট। এটি একটি কন্টেইনার হিসেবে কাজ করে এবং অন্যান্য কম্পোনেন্টগুলোকে আকারে সাজাতে সাহায্য করে। View কম্পোনেন্টের মাধ্যমে আপনি লেআউট তৈরি করতে পারেন।

• উদাহরণ:

  import { View } from 'react-native';
  
  const App = () => {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        {/* অন্যান্য কম্পোনেন্ট */}
      </View>
    );
  };

২. Text

• ব্যবহার: Text কম্পোনেন্টটি মোবাইল অ্যাপ্লিকেশনগুলিতে টেক্সট প্রদর্শনের জন্য ব্যবহৃত হয়। এটি React Native অ্যাপ্লিকেশনে সকল ধরনের লেখা (ধারা, শিরোনাম ইত্যাদি) প্রদর্শন করতে ব্যবহৃত হয়।

• উদাহরণ:

  import { Text } from 'react-native';
  
  const App = () => {
    return (
      <Text style={{ fontSize: 20, color: 'blue' }}>
        Welcome to React Native!
      </Text>
    );
  };

৩. Image

• ব্যবহার: Image কম্পোনেন্টটি ছবি বা গ্রাফিক্স প্রদর্শনের জন্য ব্যবহৃত হয়। এটি নেটিভ অ্যাপে ছবি বা লোগো ইত্যাদি দেখাতে সাহায্য করে।

• উদাহরণ:

  import { Image } from 'react-native';
  
  const App = () => {
    return (
      <Image
        source={{ uri: 'https://example.com/image.jpg' }}
        style={{ width: 100, height: 100 }}
      />
    );
  };

৪. TextInput

• ব্যবহার: TextInput কম্পোনেন্টটি ব্যবহারকারীর ইনপুট নিতে ব্যবহৃত হয়। এটি টেক্সট ফিল্ড হিসেবে কাজ করে, যা সাধারণত ফর্মে ব্যবহার করা হয়।

• উদাহরণ:

  import { TextInput } from 'react-native';
  
  const App = () => {
    return (
      <TextInput
        placeholder="Enter your name"
        style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
      />
    );
  };

৫. Button

• ব্যবহার: Button কম্পোনেন্টটি একটি বেসিক বাটন তৈরি করতে ব্যবহৃত হয়, যা ব্যবহারকারীর ইন্টারঅ্যাকশনের জন্য ব্যবহৃত হয়। আপনি এই কম্পোনেন্টটি ব্যবহার করে বিভিন্ন অ্যাকশন বা ইভেন্ট ট্রিগার করতে পারেন।

• উদাহরণ:

  import { Button } from 'react-native';
  
  const App = () => {
    return (
      <Button
        title="Press me"
        onPress={() => alert('Button pressed!')}
      />
    );
  };

৬. ScrollView

• ব্যবহার: ScrollView কম্পোনেন্টটি স্ক্রলযোগ্য কনটেন্ট দেখাতে ব্যবহৃত হয়। এটি অনেকগুলি উপাদান একসাথে স্ক্রল করার জন্য সহায়ক।

• উদাহরণ:

  import { ScrollView, Text } from 'react-native';
  
  const App = () => {
    return (
      <ScrollView>
        <Text>Item 1</Text>
        <Text>Item 2</Text>
        <Text>Item 3</Text>
        {/* আরও অনেক Text বা কম্পোনেন্ট */}
      </ScrollView>
    );
  };

৭. FlatList

• ব্যবহার: FlatList কম্পোনেন্টটি একটি দক্ষ উপায়ে একটি দীর্ঘ তালিকা বা অ্যারে প্রদর্শনের জন্য ব্যবহৃত হয়। এটি স্ক্রলযোগ্য তালিকা তৈরি করতে সাহায্য করে এবং পারফরম্যান্স অপটিমাইজেশনের জন্য এটি ব্যবহার করা হয়।

• উদাহরণ:

  import { FlatList, Text } from 'react-native';
  
  const App = () => {
    const data = ['Item 1', 'Item 2', 'Item 3'];
    return (
      <FlatList
        data={data}
        renderItem={({ item }) => <Text>{item}</Text>}
        keyExtractor={(item, index) => index.toString()}
      />
    );
  };

৮. TouchableOpacity

• ব্যবহার: TouchableOpacity কম্পোনেন্টটি বাটন বা অন্য কোনো কম্পোনেন্টে টাচ ইভেন্ট হ্যান্ডেল করার জন্য ব্যবহৃত হয়। এটি সাধারণত ক্লিক করার পর কম্পোনেন্টের স্বচ্ছতা পরিবর্তন করতে ব্যবহৃত হয়।

• উদাহরণ:

  import { TouchableOpacity, Text } from 'react-native';
  
  const App = () => {
    return (
      <TouchableOpacity onPress={() => alert('Pressed!')}>
        <Text>Click Me</Text>
      </TouchableOpacity>
    );
  };

৯. Picker

• ব্যবহার: Picker কম্পোনেন্টটি ড্রপডাউন মেনু তৈরি করার জন্য ব্যবহৃত হয়, যেখানে ব্যবহারকারী একটি অপশন নির্বাচন করতে পারে।

• উদাহরণ:

  import { Picker } from '@react-native-picker/picker';
  
  const App = () => {
    return (
      <Picker selectedValue={'java'} onValueChange={(itemValue) => console.log(itemValue)}>
        <Picker.Item label="Java" value="java" />
        <Picker.Item label="JavaScript" value="js" />
      </Picker>
    );
  };

সারাংশ

React Native-এ বিভিন্ন ধরনের বেসিক কম্পোনেন্ট ব্যবহার করে মোবাইল অ্যাপ্লিকেশন তৈরি করা হয়। প্রতিটি কম্পোনেন্টের নিজস্ব উদ্দেশ্য এবং ব্যবহার থাকে, যা অ্যাপ্লিকেশনের ইন্টারফেস এবং ফাংশনালিটি উন্নত করতে সহায়ক। উপরোক্ত কম্পোনেন্টগুলি প্রতিদিনের অ্যাপ ডেভেলপমেন্টে ব্যাপকভাবে ব্যবহৃত হয়।

React Native এ View, Text, এবং Image হল তিনটি মৌলিক কম্পোনেন্ট যা মোবাইল অ্যাপ্লিকেশন তৈরি করার জন্য ব্যবহৃত হয়। এই কম্পোনেন্টগুলির মাধ্যমে আপনি UI এর মূল উপাদানগুলো ডিজাইন ও কাস্টমাইজ করতে পারেন। নিচে এই কম্পোনেন্টগুলোর বিস্তারিত আলোচনা করা হলো:

১. View কম্পোনেন্ট

View কম্পোনেন্ট React Native-এ একটি কনটেইনার কম্পোনেন্ট, যা অন্যান্য কম্পোনেন্টকে ধারণ করে এবং সেগুলোর লেআউট এবং স্টাইলিং নিয়ন্ত্রণ করে। এটি মূলত UI এর অংশগুলি গ্রুপ করার জন্য ব্যবহৃত হয়। View সাধারণত একটি কন্টেইনার হিসেবে কাজ করে এবং অন্য UI কম্পোনেন্টগুলিকে একত্রিত বা সাজানোর জন্য ব্যবহার করা হয়।

ব্যবহার:

import React from 'react';
import { View, Text } from 'react-native';

const MyComponent = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Hello, React Native!</Text>
    </View>
  );
};

export default MyComponent;

বৈশিষ্ট্য:

• লেআউট কন্ট্রোল: View আপনাকে লেআউট পরিচালনার জন্য Flexbox ব্যবহারের সুযোগ দেয়, যেমন justifyContent, alignItems, flexDirection ইত্যাদি।
• স্টাইলিং: এটি বিভিন্ন স্টাইলিং প্রোপার্টি যেমন padding, margin, backgroundColor ইত্যাদি ব্যবহার করতে সহায়তা করে।

২. Text কম্পোনেন্ট

Text কম্পোনেন্ট React Native এ টেক্সট প্রদর্শনের জন্য ব্যবহৃত হয়। আপনি Text কম্পোনেন্ট ব্যবহার করে যেকোনো লেখা বা স্ট্যাটিক কন্টেন্ট অ্যাপ্লিকেশনের UI তে দেখাতে পারেন। Text কম্পোনেন্টের মধ্যে HTML এর মতো inline স্টাইলিং ব্যবহারের সুবিধা আছে।

ব্যবহার:

import React from 'react';
import { Text } from 'react-native';

const MyComponent = () => {
  return <Text style={{ fontSize: 20, color: 'blue' }}>Welcome to React Native!</Text>;
};

export default MyComponent;

বৈশিষ্ট্য:

• স্টাইলিং: Text কম্পোনেন্টে বিভিন্ন স্টাইল প্রয়োগ করা যায়, যেমন fontSize, fontWeight, color, lineHeight, ইত্যাদি।
• টেক্সট স্টাইলিং: Inline টেক্সট স্টাইল এবং নেস্টেড টেক্সট তৈরি করার জন্য এটি খুবই উপযোগী।
• টেক্সটের মধ্যে লিঙ্ক: React Native-এ Text কম্পোনেন্টের মধ্যে আপনি লিঙ্ক, বোল্ড, ইটালিক ইত্যাদি স্টাইল করতে পারেন।

৩. Image কম্পোনেন্ট

Image কম্পোনেন্ট React Native-এ ছবি বা ইমেজ প্রদর্শন করার জন্য ব্যবহৃত হয়। এটি স্ট্যাটিক এবং ডাইনামিক ইমেজ উভয়ই রেন্ডার করতে সক্ষম। আপনি লোকাল ইমেজ ফাইল অথবা রিমোট ইমেজ URL ব্যবহার করতে পারেন।

ব্যবহার:

import React from 'react';
import { Image } from 'react-native';

const MyComponent = () => {
  return <Image source={{ uri: 'https://example.com/myimage.png' }} style={{ width: 100, height: 100 }} />;
};

export default MyComponent;

বৈশিষ্ট্য:

• লোকাল এবং রিমোট ইমেজ: আপনি লোকাল ইমেজ ফাইল বা রিমোট ইমেজ URL ব্যবহার করতে পারেন।
• স্টাইলিং: Image কম্পোনেন্টে width, height, resizeMode ইত্যাদি স্টাইল প্রোপার্টি ব্যবহার করা যায়।
  • resizeMode: ইমেজের আকার পরিবর্তন করতে ব্যবহৃত হয়, যেমন contain, cover, stretch ইত্যাদি।
• অটো রিসাইজ: Image কম্পোনেন্টের সাহায্যে আপনি ইমেজকে অ্যাপের UI তে সঠিক আকারে রিসাইজ করতে পারেন।

সারাংশ

• View কম্পোনেন্ট: এটি একটি কনটেইনার যা অন্যান্য UI উপাদানকে ধারণ করে এবং তাদের লেআউট এবং স্টাইল নিয়ন্ত্রণ করে।
• Text কম্পোনেন্ট: এটি টেক্সট প্রদর্শন করার জন্য ব্যবহৃত হয় এবং এটি বিভিন্ন স্টাইল এবং টেক্সট ফর্ম্যাটিং এর সুবিধা দেয়।
• Image কম্পোনেন্ট: এটি ছবির প্রদর্শন এবং স্টাইলিংয়ের জন্য ব্যবহৃত হয়, যা লোকাল অথবা রিমোট ইমেজ উভয়ই সাপোর্ট করে।

এই কম্পোনেন্টগুলি React Native অ্যাপ্লিকেশনের মৌলিক UI উপাদানগুলির মধ্যে অন্তর্ভুক্ত এবং এগুলির সাহায্যে আপনি দ্রুত এবং ইন্টারেক্টিভ মোবাইল অ্যাপ্লিকেশন তৈরি করতে পারবেন।

React Native তে, Button, TextInput, এবং Touchable Components অ্যাপ্লিকেশনগুলোর জন্য খুবই গুরুত্বপূর্ণ UI উপাদান। এগুলির মাধ্যমে ব্যবহারকারী ইনপুট গ্রহণ, ইন্টারঅ্যাকশন তৈরি এবং অ্যাপ্লিকেশনের সাথে যোগাযোগ করতে পারেন।

নিচে এই Components গুলোর বিস্তারিত আলোচনা করা হলো:

১. Button Component

React Native-এ Button একটি সাধারণ UI কম্পোনেন্ট যা ব্যবহারকারীকে কোনো কার্য সম্পাদনের জন্য একটি ক্লিকযোগ্য বোতাম প্রদর্শন করতে ব্যবহৃত হয়। এটি সাধারণত লেবেল এবং একটি ইভেন্ট হ্যান্ডলার (onPress) নিয়ে কাজ করে।

Button কম্পোনেন্টটি একদম বেসিক এবং সিম্পল, এবং এটি ব্যবহারকারীর জন্য একটি অ্যাকশন (যেমন সাবমিট, নেভিগেশন ইত্যাদি) বাস্তবায়ন করতে সহায়ক।

উদাহরণ:

import React from 'react';
import { Button, View } from 'react-native';

const App = () => {
  const handlePress = () => {
    alert('Button Pressed');
  };

  return (
    <View>
      <Button 
        title="Click Me" 
        onPress={handlePress} 
      />
    </View>
  );
};

export default App;

Button Component এর প্রধান Props:

• title: বোতামের টেক্সট।
• onPress: বোতামে ক্লিক করার পর কী ঘটবে তা নির্ধারণ করে।
• color: বোতামের রঙ পরিবর্তন করতে ব্যবহার করা হয়।
• disabled: বোতামটি নিষ্ক্রিয় করার জন্য ব্যবহার করা হয়।

২. TextInput Component

TextInput কম্পোনেন্ট React Native অ্যাপ্লিকেশনগুলিতে ব্যবহারকারীর ইনপুট গ্রহণ করতে ব্যবহৃত হয়। এটি সাধারণত ফর্মগুলির জন্য ব্যবহার করা হয় যেখানে ব্যবহারকারীদের টেক্সট, নাম, ইমেইল বা পাসওয়ার্ড ইনপুট করতে হয়।

TextInput কম্পোনেন্টে অনেক ধরনের প্রপার্টি রয়েছে যা স্টাইল এবং কার্যকারিতা কাস্টমাইজ করতে সহায়ক।

উদাহরণ:

import React, { useState } from 'react';
import { TextInput, View, Text } from 'react-native';

const App = () => {
  const [text, setText] = useState('');

  return (
    <View>
      <TextInput 
        placeholder="Enter text"
        value={text}
        onChangeText={setText}
        style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 10 }}
      />
      <Text>You typed: {text}</Text>
    </View>
  );
};

export default App;

TextInput Component এর প্রধান Props:

• placeholder: টেক্সট ইনপুটে কোন টেক্সট দেখা যাবে যখন ব্যবহারকারী কিছু ইনপুট করবে না।
• value: ইনপুটের বর্তমান মান।
• onChangeText: ইনপুটের মান পরিবর্তন করার জন্য ব্যবহৃত হয়।
• secureTextEntry: পাসওয়ার্ড ইনপুটের জন্য true দিলে, এটি ইনপুটগুলোকে হিডেন (ডট আকারে) দেখাবে।

৩. Touchable Components (TouchableOpacity, TouchableHighlight, TouchableWithoutFeedback)

Touchable কম্পোনেন্টগুলি React Native-এ ব্যবহারকারী ইন্টারঅ্যাকশনের জন্য ব্যবহৃত হয়, যেমন কোনো বাটন বা ভিউতে ক্লিক বা ট্যাপ করা। এটি বিভিন্ন ধরনের কম্পোনেন্টের জন্য উপলব্ধ, যেমন TouchableOpacity, TouchableHighlight, এবং TouchableWithoutFeedback।

1. TouchableOpacity: যখন ব্যবহারকারী টাচ করবে, তখন কম্পোনেন্টের অপাসিটি হ্রাস পাবে, যা একটি "প্রেসড" (চাপানো) ইফেক্ট তৈরি করবে।

উদাহরণ:

import React from 'react';
import { TouchableOpacity, Text, View } from 'react-native';

const App = () => {
  const handlePress = () => {
    alert('Button Pressed');
  };

  return (
    <View>
      <TouchableOpacity onPress={handlePress} style={{ padding: 10, backgroundColor: 'skyblue' }}>
        <Text>Press Me</Text>
      </TouchableOpacity>
    </View>
  );
};

export default App;

2. TouchableHighlight: এটি টাচ করার পর ব্যাকগ্রাউন্ডের রঙ পরিবর্তন করে, যাতে ব্যবহারকারী বুঝতে পারে যে তারা একটি কম্পোনেন্টে ট্যাপ করেছে।

উদাহরণ:

import React from 'react';
import { TouchableHighlight, Text, View } from 'react-native';

const App = () => {
  const handlePress = () => {
    alert('Button Pressed');
  };

  return (
    <View>
      <TouchableHighlight 
        onPress={handlePress} 
        style={{ padding: 10, backgroundColor: 'lightgreen' }}
        underlayColor="yellow"
      >
        <Text>Press Me</Text>
      </TouchableHighlight>
    </View>
  );
};

export default App;

3. TouchableWithoutFeedback: এটি কোনও ভিজ্যুয়াল ইফেক্ট তৈরি না করেই কম্পোনেন্টে ট্যাপ করার সুযোগ দেয়। এটি সাধারণত ফর্ম বা 키বোর্ড বন্ধ করার জন্য ব্যবহৃত হয়।

উদাহরণ:

import React from 'react';
import { TouchableWithoutFeedback, Keyboard, View, TextInput } from 'react-native';

const App = () => {
  const dismissKeyboard = () => {
    Keyboard.dismiss();
  };

  return (
    <TouchableWithoutFeedback onPress={dismissKeyboard}>
      <View>
        <TextInput 
          placeholder="Tap outside to dismiss keyboard" 
          style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 10 }}
        />
      </View>
    </TouchableWithoutFeedback>
  );
};

export default App;

Conclusion

• Button: সিম্পল এবং ব্যবহারকারী ইনপুটের জন্য ক্লিকযোগ্য বোতাম তৈরি করতে ব্যবহৃত হয়।
• TextInput: ব্যবহারকারী থেকে টেক্সট ইনপুট গ্রহণ করতে ব্যবহৃত হয় এবং সাধারণত ফর্মগুলিতে ব্যবহৃত হয়।
• Touchable Components: মোবাইল অ্যাপ্লিকেশনে ব্যবহারকারী ইন্টারঅ্যাকশন তৈরি করতে ব্যবহৃত হয়। এগুলি বিভিন্ন ধরনের প্রেস ইফেক্ট তৈরি করতে পারে যেমন Opacity, Highlight, বা Feedback।

এগুলি React Native অ্যাপ্লিকেশনগুলির মৌলিক এবং গুরুত্বপূর্ণ UI উপাদান, যা আপনার অ্যাপের কার্যকারিতা এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সাহায্য করে।

React Native এ ScrollView এবং FlatList দুটি গুরুত্বপূর্ণ কম্পোনেন্ট যা লম্বা বা স্ক্রলযোগ্য লিস্ট বা কন্টেন্ট দেখানোর জন্য ব্যবহৃত হয়। ScrollView সাধারণত একটি স্ট্যাটিক বা ছোট স্ক্রলযোগ্য কন্টেন্টের জন্য ব্যবহৃত হয়, যেখানে FlatList বড় বা ডাইনামিক ডেটা লিস্টে পারফরম্যান্স উন্নতির জন্য ব্যবহৃত হয়।

নিচে ScrollView এবং FlatList দিয়ে ডায়নামিক UI তৈরির উদাহরণ দেওয়া হলো:

১. ScrollView দিয়ে ডায়নামিক UI তৈরি

ScrollView ব্যবহৃত হয় একটি স্ক্রলযোগ্য ভিউ তৈরি করতে, যেখানে সাধারণত অনেক কন্টেন্ট থাকে যা স্ক্রল করে দেখা যায়। এটি ব্যবহার করে আপনি দীর্ঘ তালিকা বা কন্টেন্ট স্ক্রল করতে পারেন।

import React from 'react';
import { ScrollView, Text, View, StyleSheet } from 'react-native';

const App = () => {
  return (
    <ScrollView style={styles.container}>
      <View style={styles.section}>
        <Text style={styles.title}>Section 1</Text>
        <Text style={styles.content}>This is some content for section 1.</Text>
      </View>
      <View style={styles.section}>
        <Text style={styles.title}>Section 2</Text>
        <Text style={styles.content}>This is some content for section 2.</Text>
      </View>
      <View style={styles.section}>
        <Text style={styles.title}>Section 3</Text>
        <Text style={styles.content}>This is some content for section 3.</Text>
      </View>
      {/* Add more sections as needed */}
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 20,
  },
  section: {
    padding: 20,
    marginBottom: 20,
    backgroundColor: '#f4f4f4',
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
  },
  content: {
    fontSize: 16,
  },
});

export default App;

বিস্তারিত ব্যাখ্যা:

• এখানে, ScrollView দিয়ে কয়েকটি View কম্পোনেন্ট তৈরি করা হয়েছে যা স্ক্রলযোগ্য।
• আপনি যেকোনো কন্টেন্ট, যেমন টেক্সট, ইমেজ, বা অন্যান্য কম্পোনেন্ট ScrollView এর মধ্যে রাখতে পারেন।

২. FlatList দিয়ে ডায়নামিক UI তৈরি

FlatList কম্পোনেন্ট ডাইনামিকভাবে লম্বা ডেটা লিস্ট রেন্ডার করার জন্য উপযুক্ত, বিশেষত যখন ডেটা বড় হয় বা লিস্টের আইটেমগুলো বারবার পরিবর্তিত হয়।

import React from 'react';
import { FlatList, Text, View, StyleSheet } from 'react-native';

const App = () => {
  // Sample data for the FlatList
  const data = [
    { id: '1', title: 'Item 1' },
    { id: '2', title: 'Item 2' },
    { id: '3', title: 'Item 3' },
    { id: '4', title: 'Item 4' },
    { id: '5', title: 'Item 5' },
    { id: '6', title: 'Item 6' },
    // Add more items as needed
  ];

  return (
    <FlatList
      data={data}
      renderItem={({ item }) => (
        <View style={styles.item}>
          <Text style={styles.title}>{item.title}</Text>
        </View>
      )}
      keyExtractor={(item) => item.id}
    />
  );
};

const styles = StyleSheet.create({
  item: {
    padding: 20,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
  title: {
    fontSize: 18,
  },
});

export default App;

বিস্তারিত ব্যাখ্যা:

• FlatList ডাইনামিক ডেটা রেন্ডার করার জন্য ব্যবহৃত হয়, যা অ্যাপ্লিকেশনের পারফরম্যান্স উন্নত করতে সাহায্য করে।
• renderItem প্রোপার্টির মাধ্যমে প্রতিটি আইটেমের কনটেন্ট রেন্ডার করা হয়।
• keyExtractor প্রোপার্টির মাধ্যমে প্রতিটি আইটেমের জন্য একটি ইউনিক কী নির্ধারণ করা হয়।

ScrollView এবং FlatList এর মধ্যে পার্থক্য

1. পারফরম্যান্স:
   • ScrollView: এটি সমস্ত কন্টেন্ট একসাথে রেন্ডার করে, যার ফলে এটি বড় ডেটা সেটে পারফরম্যান্স সমস্যা সৃষ্টি করতে পারে।
   • FlatList: এটি শুধুমাত্র দৃশ্যমান আইটেমগুলো রেন্ডার করে, ফলে বড় ডেটা সেটে পারফরম্যান্স অনেক উন্নত থাকে।
2. ব্যবহার:
   • ScrollView: ছোট স্ক্রলযোগ্য কন্টেন্ট বা লেআউটের জন্য উপযুক্ত, যেখানে সমস্ত কন্টেন্ট একসাথে দেখানো হয়।
   • FlatList: বড় ডেটা লিস্ট, যেমন অ্যারে বা লিস্ট, রেন্ডার করতে ব্যবহার করা হয় এবং এটি বড় ডেটাতে ভালো পারফরম্যান্স দেয়।

সারাংশ

• ScrollView সাধারণত ছোট স্ক্রলযোগ্য কন্টেন্ট বা লেআউটের জন্য উপযুক্ত, যেখানে FlatList বড় ডাইনামিক ডেটা লিস্টের জন্য ব্যবহার করা হয়।
• FlatList বড় ডেটাতে পারফরম্যান্স উন্নত করতে সাহায্য করে কারণ এটি শুধুমাত্র দৃশ্যমান আইটেমগুলো রেন্ডার করে।
• ScrollView সাধারণত ছোট স্ক্রলেবল কন্টেন্টের জন্য, যেখানে সমস্ত কন্টেন্ট একসাথে রেন্ডার হয়, ব্যবহৃত হয়।

React Native-এ StyleSheet ব্যবহার করে স্টাইল প্রয়োগ করা হয়, যা CSS-এর মতোই তবে কিছু পার্থক্য রয়েছে। React Native তে স্টাইলিং করার সময় JavaScript Object ব্যবহার করা হয়, যা CSS এর মতোই কাজ করে তবে প্ল্যাটফর্ম অনুযায়ী কোড তৈরি হয়।

React Native এর StyleSheet একটি API যা আপনাকে স্টাইলগুলিকে শ্রেণীবদ্ধ এবং পুনঃব্যবহারযোগ্য করতে সাহায্য করে, যা পারফরম্যান্সে সাহায্য করে এবং কোডের গঠনকে উন্নত করে।

StyleSheet ব্যবহার করে স্টাইল প্রয়োগের উদাহরণ

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, React Native!</Text>
    </View>
  );
};

// স্টাইলশীট তৈরি করা
const styles = StyleSheet.create({
  container: {
    flex: 1,  // পুরো স্ক্রীন দখল করতে
    justifyContent: 'center',  // উপাদানকে উল্লম্বভাবে কেন্দ্রিত করা
    alignItems: 'center',  // উপাদানকে অনুভূমিকভাবে কেন্দ্রিত করা
    backgroundColor: '#f0f0f0',  // ব্যাকগ্রাউন্ড কালার
  },
  text: {
    fontSize: 24,  // ফন্ট সাইজ
    fontWeight: 'bold',  // ফন্টের ভার
    color: '#333',  // টেক্সট কালার
  }
});

export default App;

উপরের কোডের ব্যাখ্যা

• StyleSheet.create: এখানে StyleSheet.create() ব্যবহার করা হয়েছে, যা স্টাইলগুলিকে JavaScript Object আকারে তৈরি করে এবং পারফরম্যান্স উন্নত করার জন্য এগুলি কম্পাইল করে। এটি React Native এর একটি প্র্যাকটিস যা স্টাইলিং কোডের ব্যবহারের পারফরম্যান্স বৃদ্ধি করতে সহায়ক।
• container স্টাইল: এই স্টাইলটি View কম্পোনেন্টের জন্য, যা পুরো স্ক্রীন জুড়ে থাকে। এর মধ্যে:
  • flex: 1: এটি উপাদানকে পুরো স্ক্রীন দখল করতে সাহায্য করে।
  • justifyContent এবং alignItems: এগুলি ব্যবহার করে আপনি উপাদানগুলিকে অনুভূমিক এবং উল্লম্বভাবে কেন্দ্রিত করতে পারেন।
  • backgroundColor: ব্যাকগ্রাউন্ডের রঙ নির্ধারণ করা হয়।
• text স্টাইল: এটি টেক্সটের স্টাইল, যেমন:
  • fontSize: টেক্সটের আকার।
  • fontWeight: ফন্টের ভার।
  • color: টেক্সটের রঙ।

CSS-এর সাথে তুলনা

React Native-এ স্টাইলিং CSS-এর মতো হলেও কিছু ভিন্নতা রয়েছে, যেমন:

• CSS-এ স্টাইলগুলো আলাদা ফাইলের মধ্যে থাকে, কিন্তু React Native-এ JavaScript Object এর মাধ্যমে স্টাইল যুক্ত করা হয়।
• React Native flexbox ব্যবহার করে লেআউট তৈরি করে, যা CSS এর flexbox এর সাথে সম্পর্কিত তবে কিছু পার্থক্য থাকতে পারে।
• React Native শুধুমাত্র সিম্পল স্টাইল সমর্থন করে, যেমন fontSize, margin, padding ইত্যাদি। কিছু CSS প্রোপার্টি (যেমন hover, focus, animation) React Native-এ নেই।

সারাংশ

React Native-এ StyleSheet ব্যবহার করে আপনি CSS-এর মতো স্টাইল প্রয়োগ করতে পারেন, তবে এখানে JavaScript Object ব্যবহার করে স্টাইল তৈরি করতে হয়। StyleSheet.create() ব্যবহার করে আপনি স্টাইলগুলোকে আরও কার্যকরভাবে এবং পারফরম্যান্স ভিত্তিকভাবে লিখতে পারবেন। এটি React Native অ্যাপ্লিকেশনের জন্য একটি শক্তিশালী এবং কার্যকরী স্টাইলিং পদ্ধতি।